<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>商品添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-body">
        <form class="layui-form">
          <div class="layui-form-item">
              <label for="SelectGoodsimgBtn" class="layui-form-label">
                 商品图片
              </label>
              <div class="layui-input-inline" style="width: 300px">
<!--                  <input type="file" id="goodsimg" name="goodsimg" class="layui-input">-->
                  <button type="button" class="layui-btn layui-btn-normal" id="SelectGoodsimgBtn">选择图片</button>
                  <img src="" id="goodsImg" class="carouselImg" style="width: 90px">
              </div>

          </div>
          <div class="layui-form-item">
              <label for="goodstitle" class="layui-form-label">
                  商品名称
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="goodstitle" name="goodstitle" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
                <label for="goodsprice" class="layui-form-label">
                    商品原价
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="goodsprice" name="goodsprice" class="layui-input">
                </div>
          </div>
            <div class="layui-form-item">
                <label for="currentprice" class="layui-form-label">
                    商品现价
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="currentprice" name="currentprice" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="SelectGoodsimgBtn1" class="layui-form-label">
                    商品详情
                </label>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-normal" id="SelectGoodsimgBtn1">选择图片</button>
                </div>
                <div class="layui-upload-list col-md-12">
                    <table class="layui-table" style="margin: 0 0 0 0">
                        <thead style="display: none">
                        <tr>
                            <th >预览图片</th>
                            <th>图片名</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="demoList"></tbody>
                    </table>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="total" class="layui-form-label">
                    商品总量
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="total" name="total" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品分类</label>
                <div class="layui-input-block">
                    <select name="categoryname" id="gcid">
                        <option value="1">新鲜蔬菜</option>
                        <option value="2">时令水果</option>
                        <option value="3">乳饮酒水</option>
                        <option value="4">零食小吃</option>
                        <option value="5">肉蛋水产</option>
                        <option value="6">粮油调味</option>
                        <option value="7">个护美妆</option>
                        <option value="8">家清纸品</option>
                        <option value="9">日用百货</option>
                        <option value="10">绿植花卉</option>
                    </select>
                </div>
            </div>
          <div class="layui-form-item">
              <label class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="addGoods" lay-submit="" id="addGoods">
                  增加
              </button>
          </div>
      </form>
    </div>
    <script>
        layui.use(['upload','form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer
        ,upload = layui.upload

            let goodsImg;
            var goodsimgFile;
            var goodsdescFiles;
            upload.render({
                elem: '#SelectGoodsimgBtn'
                ,multiple: false //多文件上传为true
                ,accept: 'file'//指定允许上传时校验的文件类型
                ,auto: false  //自动上传为true
                ,choose: function(obj){//选择完文件后的回调函数
                    // goodsimgFile = this.files=obj.pushFile(); //将每次选择的文件追加到文件队列
                    // console.log(goodsimgFile);
                    // console.log(this.files);
                    obj.preview(function (index, file, result) {
                        goodsimgFile=file
                        console.log(goodsimgFile);
                        $('#goodsImg').attr('src', result); //图片链接（base64）直接将图片地址赋值给img的src属性
                    });
                }
            })
            upload.render({
                elem: '#SelectGoodsimgBtn1'
                // ,url: '/goods/addGoods'
                ,multiple: true //多文件上传为true
                ,accept: 'file'//指定允许上传时校验的文件类型
                ,auto: false  //自动上传为true
                ,choose: function(obj){//选择完文件后的回调函数
                    goodsdescFiles = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    obj.preview(function (index, file, result) {
                        var tr = $(['<tr id="upload-' + index + '">'
                            , '<td ><img src="' + result + '" id="goodsImg-' + index + '" className="carouselImg" style="width: 90px"></td>'
                            , '<td>' + file.name + '</td>'
                            , '<td >' + (file.size / 1014).toFixed(1) + 'kb</td>'
                            , '<td >等待上传</td>'
                            , '<td>'
                            , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            , '</td>'
                            , '</tr>'].join(''));
                        //单个重传
                  /*      tr.find('.demo-reload').on('click', function () {
                            obj.upload(index, file);
                        });*/
                        //删除
                        tr.find('.demo-delete').on('click', function () {
                                delete files[index]; //删除对应的文件
                                tr.remove();
                                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });
                        $('#demoList').append(tr);
                    });
                }
                ,before: function () {
                    layer.msg('上传中', {
                        icon: 16,
                        time:800,
                        shade: 0.01
                    }); //上传loading
                    this.data = {
                        goodstitle: $('#goodstitle').val(),
                        goodsprice: $('#goodsprice').val(),
                        currentprice: $('#currentprice').val(),
                        goodsdesc: $('#goodsdesc').val(),
                        total: $('#total').val(),
                        gcid: $('#gcid').val(),
                    }
                }
                ,done: function(res, index, upload){ //上传成功的回调
                    layer.alert("增加成功", {icon: 6});
                    if(res.code == 0){ //上传成功
                        alert(res.msg)
                        return;
                    }else{
                        alert("上传发生错误！")
                    }
                }
            })

            form.on('submit(addGoods)',function (data){
                console.log("#########++++++")
                var formData=new FormData()
                formData.append("files",goodsimgFile)
                console.log(goodsimgFile)
                for (let i in goodsdescFiles){
                    formData.append("files",goodsdescFiles[i])
                    console.log(goodsdescFiles[i])
                }

                formData.append("gcid",$('#gcid').val())
                formData.append("goodstitle",$('#goodstitle').val())
                formData.append("goodsprice",$('#goodsprice').val())
                formData.append("currentprice",$('#currentprice').val())
                formData.append("total",$('#total').val(),)

                console.log(formData)
                console.log(formData.get("gcid"))
                console.log(formData.get("goodstitle"))
                console.log(formData.get("goodsprice"))
                console.log(formData.get("currentprice"))
                console.log(formData.get("total"))
                console.log(formData.get("files"))

                $.ajax({
                    url: 'http://localhost:8080/goods/addGoods',
                    type:'post',
                    data:formData,
                    processData:false,
                    contentType:false,
                    async:false,
                    dataType:'json',
                    success:function (res){
                        console.log(res)
                        // layer.alert("商品添加成功")
                        alert('添加成功')
                    }

                })

            })



            /*upload.render({
                elem: '#SelectGoodsimgBtn'
                ,url: '/goods/addGoods'
                ,multiple: false //多文件上传为true
                ,accept: 'file'//指定允许上传时校验的文件类型
                ,auto: false  //自动上传为true
                // ,data:{gcid:$("#categoryname").val()}
                ,bindAction: '#addGoods'
                ,choose: function(obj){//选择完文件后的回调函数
                    obj.preview(function(index, file, result){//预览选中的图片
                        $('#goodsImg').attr('src', result); //图片链接（base64）直接将图片地址赋值给img的src属性
                        goodsImg=file
                        console.log("file:"+file)
                    })
                }
                ,before: function () {
                    layer.msg('上传中', {
                        icon: 16,
                        time:800,
                        shade: 0.01
                    }); //上传loading
                    this.data = {
                        goodstitle: $('#goodstitle').val(),
                        goodsprice: $('#goodsprice').val(),
                        currentprice: $('#currentprice').val(),
                        goodsdesc: $('#goodsdesc').val(),
                        total: $('#total').val(),
                        gcid: $('#gcid').val(),
                    }
                }
                ,done: function(res, index, upload){ //上传成功的回调
                    layer.alert("增加成功", {icon: 6});
                    if(res.code == 0){ //上传成功
                        alert(res.msg)
                        return;
                    }else{
                        alert("上传发生错误！")
                    }
                }
            })*/

          //监听提交
          /*form.on('submit(add)', function(data){
              //首先把图片数据上传到腾讯云cos存储起来，并直接把返回的图片http链接保存到数据库
            console.log(data);//data：添加的所有数据
            console.log(goodsImg);
            console.log("categoryname:"+$("#categoryname").val());
            // alert($("#categoryname").val())
            //发异步，把数据提交给后台
              $.ajax({
                  type: 'post',
                  url: "/goods/addGoods",
                  processData: false,
                  contentType: false,
                  async: false,
                  data:{
                    file:goodsImg,
                      goods:data,
                  },
                  success: function (res) {
                      console.log(res);
                  }
              });
            layer.alert("增加成功", {icon: 6},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
            return false;
          });*/
          
          
        });
    </script>
    <script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();</script>
  </body>

</html>